<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchMap.data" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.data.name"
          placeholder="模板名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="findSelect();dialogFormVisible_add = true;entity={
        
      }" 
          >模板添加</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="delChoose()"
          >批量删除</el-button>
      </el-form-item>
      </el-form>
      <el-table ref="multipleTable" :data="templateList" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column   type="selection" width="80">
      </el-table-column>
      <el-table-column  v-model="entity.name" prop="name" label="模板名称" width="180">
      </el-table-column>
      <el-table-column v-model="entity.brands" prop="brands" label="模板关联品牌" width="180">
        <template slot-scope="scope">
                  <div>{{scope.row.brands|jsonFormat('name')}}</div>
        </template>
      </el-table-column>
      <el-table-column v-model="entity.spec" prop="spec" label="模板关联规格" width="180">
         <template slot-scope="scope">
                  <div>{{scope.row.spec|jsonFormat('name')}}</div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="300">
        <template slot-scope="scope">
          <div>
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="findSelect(scope.row);dialogFormVisible_add = true"
              >修改</el-button
              >
              <el-button
              type="primary"
              icon="el-icon-edit"
              @click="deleteOne(scope.$index, scope.row)"
              >删除</el-button
              >
          </div>
        </template>
        
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchMap.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="this.total"
    >
    </el-pagination>

    <!-- 添加模板 -->
      <el-dialog title="规格编辑" :visible.sync="dialogFormVisible_add">
      <el-form :model="entity">
        <el-form-item label="规格名称" >
          <el-input v-model="entity.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="关联品牌" >
         <el-select v-model="entity.brands" multiple  autocomplete="off">
           <el-option
      v-for="item in brands"
      :key="item.id"
      :label="item.name"
      :value="item.id">
         </el-option>
          </el-select> 
        </el-form-item>
         <el-form-item label="关联规格" >
         <el-select v-model="entity.spec" multiple  autocomplete="off">
           <el-option
      v-for="item in spec"
      :key="item.id"
      :label="item.specName"
      :value="item.id">
         </el-option>
          </el-select>
        </el-form-item>
    
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveData()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
import { search, addOrUpdate, delTemplates, delOne,specFind,brandFind,findBrandId,findSpecId } from "@/api/template";
export default {
  data() {
    return {
      dialogFormVisible_edit: false, //编辑弹窗开关
      dialogFormVisible_add: false, //添加弹窗开关
      visible: false, //删除弹窗开关
      templateList: [],
      selectionList:[],
      brandsAll:[],
      specAll:[],
      a:"",
      b:"",
      entity:{
         brands:[
         ],
         spec:[
         ],
      },
      
      object:{
         name:"",
         spec:"",
         brands:"",
      },
      brands:{
        value:'',
        label:''
      },
      spec:{
        value:'',
        label:''
      },
      value1:[],
      value2:[],
      total: 0,
      searchMap: {
        page: 1,
        limit: 5,
        data: {},
      },
      delData: {}, 
      editDialogData: {}, 
      gooodSpec: {}, 
    };
  },
  methods: {
    handleSelectionChange(selection){
            this.selectionList = [];
            console.log(1);
		    selection.forEach(element => {
		        this.selectionList.push(element)
		    });
        },

    handleEdit(index,row){
      var that = this;
      that.dialogFormVisible_add = true;
      that.entity = row;
    },    
        
    findSelect(row){
      this.entity=row
    specFind().then((res)=>{
        this.spec=res;
        console.log(res);
    })
    brandFind().then((res)=>{
        this.brands=res;
        console.log(res);
    })
    },
    deleteOne(index,row){
      //console.log(row);
      delOne(row).then((res)=>{
          console.log(res);
      })
      this.search();
    },
    saveData(){
      var that = this;
    //   console.log(this.entity);
    //   console.log(this.entity.brands.keys);
    //   console.log(this.entity.brands.values);
      //console.log(this.entity.brands);
          var arr = {brandList:this.entity.brands};
      //that.object.brands={brandList:this.entity.brands};
      // console.log(that.object.brands);
       //that.object.brands= JSON.stringify(this.entity.brands);
    //   that.object.spec=JSON.stringify(this.entity.spec);
    //[{"id":1,"name":"saa"},{"id":1,"name":"saa"}]
           var brandList = arr.brandList;  
           var brr = {specList:this.entity.spec}
           var specList=brr.specList;
          //  that.brandsAll = []; 
           //var a="";
           findBrandId(brandList).then(res=>{
               //brandsAll=res.data;
                  res.forEach((element)=>{
                      var object = {};
                      object.id=element.id;
                      object.name = element.name;
                      var str=JSON.stringify(object);
                      //console.log(str);
                      //console.log(that.brandsAll);
                      //that.brandsAll=JSON.parse(that.brandsAll);
                        that.brandsAll.push(str)
                        that.a=that.brandsAll.join(",")
                      //console.log("s"+s)
                  });
                //console.log(that.a);
                that.object.brands= that.a;
               // console.log(that.object.brands);
                findSpecId(specList).then(res1=>{
                 res1.forEach((element1)=>{
                      var object = {};
                      object.id=element1.id;
                      object.name = element1.specName;
                       var str =JSON.stringify(object);
                      //console.log(str);
                      //console.log(that.brandsAll);
                      //that.brandsAll=JSON.parse(that.brandsAll);
                        that.specAll.push(str)
                        that.b=that.specAll.join(",")
                      //console.log("s"+s)
                  });
                //console.log(that.b);
                that.object.brands= that.a;
               // console.log(that.object.brands);
              
                that.object.name=this.entity.name;
                that.object.spec=that.b;
                addOrUpdate(this.object).then((res)=>{
               // console.log(res);
                this.search();
                })

                
      }); 
               //console.log("s1"+s)
               //that.object.brands=that.object.brands.join(",");
               //console.log(res);
               });
              //  console.log(that.brandsAll);
              //  var a="";
              //  that.brandsAll.forEach((element)=>{
              //     a=element;
              //     return a;
              //  })
               //console.log("a"+a);
                //that.brandsAll=that.brandsAll.join(",")
                //console.log(that.a);
                //that.a=that.a.substr(0, that.a.length - 1); 
               
          //  console.log(brandsAll);         
    //   this.entity.brands.forEach((id)=>{
    //      // alert(element);
    //        console.log(id);
    //        //that.object.brands="[{'id'"
    //        findBrandId(9).then(res=>{
    //              console.log(res);
    //        })         
    //        that.object.brands=element+" "+that.object.brands;
    //   });
    //   this.entity.spec.forEach((element)=>{
    //       that.object.spec=element+" "+that.object.spec;
    //   });
      
      // addOrUpdate(this.object).then((res)=>{
      //     console.log(res);
      // });
      this.dialogFormVisible_add = false;
    },
    //搜索
    search() {
      //console.log(1);
      var _this = this;
      search(this.searchMap).then((res) => {
          _this.templateList=res.data;
          _this.total = res.total;
      });
    },
   handleSizeChange(size) {
      this.searchMap.limit = size;
      this.search();
    },
    handleCurrentChange(currentPage) {
      this.searchMap.page = currentPage;
      this.search();
    },
    delChoose(){
     var that = this;
     console.log(that.selectionList);
     var num = [];
     that.selectionList.forEach(element=>{
        num.push(element.id);
     })
     this.delData = num;
     delTemplates(this.delData).then((res)=>{
       if (res.success) {
          that.search();
          this.$message({
            showClose: true,
            message: res.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
        console.log(res);
    });
    
    },
  },
  created() {
    let that = this;
    that.search();
  },
  filters: {
    jsonFormat(source,key){
      // console.log(source)
      if(!source){
        return '---'
      }else{
        var obj = eval("["+source+"]");
        console.log(obj)
        var arr=[]
        obj.forEach(item => {
          arr.push(item[key])
        });
        console.log(arr)
        return arr.join(",")
      }
    }
  }
};
</script>